<template>
    <div>
        <div class="table_form_wrap">
            <div class="left">
                <el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="handleSubmit()" label-width="120px">
                    <el-form-item label="登录账号" prop="username">
                        <el-input :disabled="true" placeholder="" v-model="form.username" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="所属角色" prop="roleIds">
                        <el-select
                         :disabled="true"
                            v-model="form.roleIds"
                            multiple
                            filterable
                            allow-create
                            default-first-option
                            placeholder="请选择角色"
                            style="width: 100%">
                            <el-option
                                v-for="item in roles"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="姓名" prop="realname">
                        <el-input :disabled="true" placeholder="" v-model="form.realname" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-select v-model="form.sex" placeholder="请选择">
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生日" prop="birthday">
                        <el-date-picker
                            v-model="form.birthday"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="手机号码" prop="mobile">
                        <el-input placeholder="" v-model="form.mobile" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱地址" prop="email">
                        <el-input placeholder="" v-model="form.email" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="text" @click="dialogEditPassVisible = true">修改密码</el-button>
                    </el-form-item>

                </el-form>
            </div>
            <div class="right">
                <SingleUpload v-model="form.avatar" listType="picture-card"></SingleUpload>
                <i style="color: red" class="mt10">尺寸：150x200</i>
            </div>
        </div>

        <el-dialog
            title="修改密码"
            :visible.sync="dialogEditPassVisible"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="30%">
            <el-form
                :model="editPasswordForm"
                :rules="editPasswordRules"
                ref="editPasswordForm"
                labelWidth="120px">
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input v-model="editPasswordForm.oldPassword" show-password style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="editPasswordForm.newPassword" show-password style="width: 80%"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="rePass">
                    <el-input v-model="editPasswordForm.rePass" show-password style="width: 80%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditPassVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatePassword" :loading="submitLoading">确 定</el-button>
            </div>
        </el-dialog>

        <div class="foot_submit">
            <el-button @click="handleSubmit" type="primary" :loading="submitLoading">提 交</el-button>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SingleUpload from '@/views/components/upload/single-upload'
export default {
    components: {
        SingleUpload
    },
    computed: {
        ...mapGetters(['user'])
    },
    data() {
        const validPhone = (rule, value, callback) => {
            var re = /^1[0-9]{10}$/;
            if (!re.test(value)) {
                callback(new Error('请输入正确格式的手机号'));
            } else {
                callback();
            }
        }
        const validRePassword = (rule, value, callback) => {
            if (value !== this.editPasswordForm.newPassword) {
                callback(new Error('两次输入密码不一致'));
            } else {
                callback();
            }
        }
        return {
            submitLoading: false,

            form: {
                realname: null,
                username: null,
                password: null,
                salt: null,
                mobile: null,
                email: null,
                avatar: null,
                sex: "男",
                birthday: null,
                status: 1,
                roleIds: []
            },
            rules: {
                mobile: [
                    { required: true, message: '手机号码不能为空', trigger: 'blur' },
                    { validator: validPhone }
                ],
                email: [
                    { required: true, message: '邮箱不能为空', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '性别(男,女)不能为空', trigger: 'blur' }
                ],
                birthday: [
                    { required: true, message: '生日不能为空', trigger: 'blur' }
                ]
            },

            roles: [],

            dialogEditPassVisible: false, // 修改密码Dialog
            editPasswordForm: {
                id: null,
                oldPassword: null,
                newPassword: null,
                rePass: null
            },
            editPasswordRules: {
                oldPassword: [
                    { required: true, message: '请输入原密码', trigger: 'blur' }
                ],
                newPassword: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 6, message: '请至少输入6个字符', trigger: 'blur' },
                    { max: 32, message: '最多输入32个字符', trigger: 'blur' }
                ],
                rePass: [
                    { required: true, message: '请再次输入新密码', trigger: 'blur' },
                    { validator: validRePassword, trigger: 'blur' }
                ]
            },
        };
    },

    created() {
        this.getInfo()
    },

    methods: {
        /**
         * 详细信息
         */
        async getInfo() {
            const roles = await this.$http({
                url: '/system/sysrole/list',
                method: 'GET'
            })
            this.roles = roles.data

            const user = await this.$http({
                url: '/system/sysuser/info/' + this.user.id,
                method: 'GET'
            })
            this.form = user.data
        },


        /**
         * 提交表单
         */
        async handleSubmit() {
            const refs = this.$refs
            this.submitLoading = true
            const valid = await refs['form'].validate().catch(() => {})
            if(valid) {
                const res = await this.$http({
                    url: `/system/sysuser/update`,
                    method: 'POST',
                    data: this.form
                })
                if (this.ResultMessage(res)) {
                    this.submitLoading = false
                    this.visible = false
                } else {
                    this.submitLoading = false
                }
            } else {
                this.submitLoading = false
            }
        },

        /**
         * 修改密码
         */
        async updatePassword() {
            const refs = this.$refs
            this.submitLoading = true
            const valid = await refs['editPasswordForm'].validate().catch(() => {})
            if(valid) {
                this.editPasswordForm.id = this.user.id
                const res = await this.$http({
                    url: `/system/sysuser/updateMyPassword`,
                    method: 'POST',
                    data: this.editPasswordForm
                })
                if (this.ResultMessage(res)) {
                    this.$refs['editPasswordForm'].resetFields()
                    this.submitLoading = false
                    this.dialogEditPassVisible = false
                } else {
                    this.submitLoading = false
                }
            } else {
                this.submitLoading = false
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.table_form_wrap{
    display: flex;
    .left {
        width: 600px;
    }
    .right{
        width: 300px;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 20px;
    }
}
.foot_submit{
    width: 900px;
    display: flex;
    justify-content: center;
}
</style>
